<!-- 
* 冥想页面 
* 2019年5月16日17:06:10
* penglei
* -->
<template>
    <view class="content">
		<view class="_label_top">
			<image class="_btn_top" src="../../static/img/kjg.png"></image>
			<label class="_lab_top">{{itext}}</label>
		</view>
		<view  class="_bg_middle">
			<text :animation="animationData">{{inumber}}</text>
		</view>
		<view class="_next">
			<mBtnCs class="_lbtn" text="下一步" @click="tapCard"/>
			<text class="_tost">心越诚，意念越强，占卜的结果就会越准哦~</text>
		</view>
		<cmd-bottom-nav @click="tapNav"  border-color="#BC1BBE" background-color="#BC1BBE" font-color="#fff" active-font-color="#fff" current="1" :BOTTOM_DISTANCE="getModel"></cmd-bottom-nav>
    </view>
</template>

<script>
	import cmdBottomNav from "@/components/cmd-bottom-nav/cmd-bottom-nav.vue"
	import mbtn from "@/components/m-btn-type/m-btn.vue"
	import mtabbar from "@/components/m-tabbar/m-tabbar.vue"
	import mBtnCs from '@/components/m-btn/m-btn-cs.vue'
	import comm from '../../common/helpers.js'
    export default {
		components:{mbtn,mtabbar,cmdBottomNav,mBtnCs},
		data(){
			return{
				itext:'冥想问题前,请深呼吸...',
				inumber:30,
				animationData:'',
				timer:'',
				//存放选择的占卜类型
				type:'',
			}
		},
        onLoad(e) {
			//登录获取openid
			uni.setStorageSync('type',e.type)
			uni.setStorageSync('rule',e.rule)
			this.countDown(0,30)
        },
		onHide() {
			clearInterval(this.timer)
		},
		onShow() {
			uni.setStorageSync('m23lock',0)
			uni.setStorageSync('m32lock',0)
			uni.setStorageSync('m33lock',0)
		},
		methods:{
			countDown(minutes, second, TimeoutCallback){
				var that = this
				// 用来实现最后十秒强调的动画
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				var interval = () => {
				  if (minutes > 0 && second >= 0 || second > 10){
					that.animationData = animation.export()
					that.inumber = (second--)
				  }else if (minutes > 0){
					minutes--;
					second = 59;
					that.inumber = (minutes + ':' + second--)
				  }else if (second >= 0){
					animation.scale(1.5,1.5).step()
					animation.scale(1,1).step()
					that.animationData = animation.export()
					that.inumber = second--
				  }else{
					clearInterval(that.timer)
					// 倒计时结束回调
					if (typeof TimeoutCallback !== 'function'){
						this.tapCard()
						return 
					}
					TimeoutCallback()
				  }           
				}
				// 因为定时器会延时一个间隔单位，所以先执行一次
				interval()    
				that.timer = setInterval(interval,1000)   
			},
			tapNav(e){
				let that = this
				let path = e.item.pagePath
				uni.switchTab({
					url:path,
					success: (res) => {
						clearInterval(that.timer)
					},
					complete: (com) => {
					}
				})
			},
			tapCard(){
				let that = this
				uni.navigateTo({
					url: '/pages/card/main_card',
					success: res => {
						clearInterval(that.timer)
					},
					fail: () => {},
					complete: () => {}
				})
			}
		},
		computed:{
			getModel(){
				return uni.getStorageSync('model')
			}
		}
		
    }
</script>

<style lang="scss">
	.content{
		padding: 0upx;
		background-image: url("https://zhanbu.nomeis.cn/upload/page_resource/mx_bg.png");
		background-size: 100% 90%;
		
		
		._bg{
			width: 100%;
			height:90%;
			vertical-align: top;
			top: 0;
			right: 0;
			position:absolute;
			vertical-align: middle;
		}
		
		._label_top{
			display:flex;
			width:100%;
			top:25upx;
			height:auto;
			position:relative;
			justify-content:center;

			._btn_top{
				height:185upx;
				width: 50%;
			}
			
			._lab_top{
				z-index:3;
				color:white;
				width:30%;
				text-align:center;
				justify-content:center;
				align-items:center;
				position:absolute;
				display:flex;
				margin:auto;
				height:100%;
			}
		}
		
		._bg_middle{
			width:100%;
			height:100%;
			position:absolute;
			z-index:7;
			margin:auto;
			justify-content:center;
			vertical-align:middle;
			align-items:center;
			display:flex;
			
			text{
				margin-top:-65rpx;
				font-size:38pt;
				color:white;
			}
		}
		
		._tabbar{
			background-color:#BC1BBE;
			position:relative;
			height:10%;
			bottom:0px;
			position:fixed;
			width:100%;
		}
		
		._next{
			width:50%;
			margin:auto;
			top:225upx;
			position:relative;
			z-index: 8;
			
			._tost{
				color:white;
				font-size:8pt;
				text-align:center;
				position:relative;
				display:flex;
				margin-top:85upx;
			}
		}
	}
</style>
